/* 用于注册一些常用的css类 */

/* 品牌色（公共样式） */
.public-green { background-color: #009D8E !important; }
.public-black { background-color: #363640 !important; }
.public-orange { background-color: #ffffcc !important; }
.public-gray { background-color: #9FA0A0 !important; }
.public-white { background-color: #FFFFFF !important; }

/* .text-green { color: #009900; } */
.text-green { color: #66c12b; }
.text-orange { color: #ffffcc; }
.text-gray { color: #9FA0A0; }
.text-white { color: #FFFFFF; }
.text-black { color: #000000; }
.text-blue { color: #55a6fe; }
.text-red { color: red !important; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* min-height: calc(100vh - 74px); */
.page-default { width: 100%; padding: 8px !important; box-sizing: border-box; }

.bg-default {
  background-color: #f5f5f5;
}

.public-radius {
  border-radius: 8px;
}
.pa-gap { padding: 12px !important; }
.px-gap { padding-left: 12px !important;padding-right: 12px !important; }
.py-gap { padding-top: 12px !important;padding-bottom: 12px !important; }
.pl-gap { padding-left: 12px !important; }
.pr-gap { padding-right: 12px !important; }
.pt-gap { padding-top: 12px !important; }
.pb-gap { padding-bottom: 12px !important; }
.ma-gap { margin: 12px !important; }
.mx-gap { margin-left: 12px !important;margin-right: 12px !important; }
.my-gap { margin-top: 12px !important;margin-bottom: 12px !important; }
.ml-gap { margin-left: 12px !important; }
.mr-gap { margin-right: 12px !important; }
.mt-gap { margin-top: 12px !important; }
.mb-gap { margin-bottom: 12px !important; }

/* 公共样式 */
html, body, #app { margin: 0; padding: 0; width: 100%; height: 100%; }
div { box-sizing: border-box; }

/* 品牌绿按钮 */
.public-primary-btn {
  border-color: initial !important;
  background-color: #009D8E !important;
  color: #FFFFFF !important;
}
.public-primary-btn:active {
  opacity: .8;
}

.font-bold {
  font-weight: bold;
}

/* 返回按钮 */
.split-line {
  border-top: 1px solid #ccc;
}

/* v-text中代码换行 */
.code-box {
  padding: 20px;
  margin-left: 20px;
  margin-right: 20px;
  border: 1px solid #ccc;
  background-color: #fafafa;
  font-size: 18px;
  white-space: pre-wrap;
}


/* flex布局类 */
.flex { display: flex }
.row-flex { display: flex; flex-direction: row;}
.column-flex { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.no-wrap { flex-wrap: nowrap; }
.justify-strat { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.items-start { align-items: flex-start }
.items-end { align-items: flex-end }
.items-center { align-items: center }
.items-stretch { align-items: stretch }
.items-baseline { align-items: baseline }

.flex-1 { flex: 1; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; }
.flex-2 { flex: 2; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; }
.flex-3 { flex: 3; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; }
.flex-4 { flex: 4; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; }
.flex-5 { flex: 5; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; }

.flex-1-sample { flex: 1; box-sizing: border-box; }
.flex-2-sample { flex: 2; box-sizing: border-box; }
.flex-3-sample { flex: 3; box-sizing: border-box; }
.flex-4-sample { flex: 4; box-sizing: border-box; }
.flex-5-sample { flex: 5; box-sizing: border-box; }

/* 在flex中实现scroll效果 */
.page-layout {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* height: 100%; */
  box-sizing: border-box;
}
.page-header {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 50px;
  border-bottom: 1px solid #ccc; 
}
.page-body { display: flex; flex: 1; overflow: hidden; }
.page-body > div + div { border-left: 1px solid #ccc; }
.page-footer { min-height: 50px; }
.scorll-box { width: 100%; height: 100%; overflow-y: scroll; }

/* 内间距设置 */
.pt-xs { padding-top: 4px !important; }
.pt-sm { padding-top: 8px !important; }
.pt-md { padding-top: 16px !important; }
.pt-lg { padding-top: 24px !important; }
.pt-xl { padding-top: 48px !important; }

.pr-xs { padding-right: 4px !important; }
.pr-sm { padding-right: 8px !important; }
.pr-md { padding-right: 16px !important; }
.pr-lg { padding-right: 24px !important; }
.pr-xl { padding-right: 48px !important; }

.pb-xs { padding-bottom: 4px !important; }
.pb-sm { padding-bottom: 8px !important; }
.pb-md { padding-bottom: 16px !important; }
.pb-lg { padding-bottom: 24px !important; }
.pb-xl { padding-bottom: 48px !important; }

.pl-xs { padding-left: 4px !important; }
.pl-sm { padding-left: 8px !important; }
.pl-md { padding-left: 16px !important; }
.pl-lg { padding-left: 24px !important; }
.pl-xl { padding-left: 48px !important; }

.px-xs { padding-left: 4px !important; padding-right: 4px !important; }
.px-sm { padding-left: 8px !important; padding-right: 8px !important; }
.px-md { padding-left: 16px !important; padding-right: 16px !important; }
.px-lg { padding-left: 24px !important; padding-right: 24px !important; }
.px-xl { padding-left: 48px !important; padding-right: 48px !important; }

.py-xs { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-sm { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-md { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-lg { padding-top: 24px !important; padding-bottom: 24px !important; }
.py-xl { padding-top: 48px !important; padding-bottom: 48px !important; }

.pa-xs { padding: 4px !important; }
.pa-sm { padding: 8px !important; }
.pa-md { padding: 16px !important; }
.pa-lg { padding: 24px !important; }
.pa-xl { padding: 48px !important; }

/* 外间距设置 */
.mt-xs { margin-top: 4px !important; }
.mt-sm { margin-top: 8px !important; }
.mt-md { margin-top: 16px !important; }
.mt-lg { margin-top: 24px !important; }
.mt-xl { margin-top: 48px !important; }

.mr-xs { margin-right: 4px !important; }
.mr-sm { margin-right: 8px !important; }
.mr-md { margin-right: 16px !important; }
.mr-lg { margin-right: 24px !important; }
.mr-xl { margin-right: 48px !important; }

.mb-xs { margin-bottom: 4px !important; }
.mb-sm { margin-bottom: 8px !important; }
.mb-md { margin-bottom: 16px !important; }
.mb-lg { margin-bottom: 24px !important; }
.mb-xl { margin-bottom: 48px !important; }

.ml-xs { margin-left: 4px !important; }
.ml-sm { margin-left: 8px !important; }
.ml-md { margin-left: 16px !important; }
.ml-lg { margin-left: 24px !important; }
.ml-xl { margin-left: 48px !important; }

.mx-xs { margin-left: 4px !important; margin-right: 4px !important; }
.mx-sm { margin-left: 8px !important; margin-right: 8px !important; }
.mx-md { margin-left: 16px !important; margin-right: 16px !important; }
.mx-lg { margin-left: 24px !important; margin-right: 24px !important; }
.mx-xl { margin-left: 48px !important; margin-right: 48px !important; }

.my-xs { margin-top: 4px !important; margin-bottom: 4px !important; }
.my-sm { margin-top: 8px !important; margin-bottom: 8px !important; }
.my-md { margin-top: 16px !important; margin-bottom: 16px !important; }
.my-lg { margin-top: 24px !important; margin-bottom: 24px !important; }
.my-xl { margin-top: 48px !important; margin-bottom: 48px !important; }

.ma-xs { margin: 4px !important; }
.ma-sm { margin: 8px !important; }
.ma-md { margin: 16px !important; }
.ma-lg { margin: 24px !important; }
.ma-xl { margin: 48px !important; }

/* 页面标题 */
.headTitle {
  /* justify-content: space-between; */
  border-bottom: 1px solid #E9E9E9;
  font-size: 12px;
  font-weight: 600;
}
.subheadings {
  justify-content: space-between;
  padding-bottom: 3px;
  font-size: 14px;
  font-weight: 200;
}
/* 线框 */
.borderline {
  border: 1px solid #ccc;
}
.topline {
  border-top: 1px solid #ccc;
}
.underline {
  border-bottom: 1px solid #ccc;
}
.leftline {
  border-left: 1px solid #ccc;
}
.rightline {
  border-right: 1px solid #ccc;
}
.border-radius-line {
  /* 园角线框 */
  /* border-radius:25px; */
  border-radius:10px;
  border: 1px solid #ccc;
}
/* 表格 */
.table-wrap {
  /* flex: 1; */
  position: relative;
  
}
.table-content {
  position: absolute;
  width: 100%;
  height: 100%!important;
  overflow:visible
}
/* 移动至最右 */
.toRight {
  right:20px;
}

/* borderBox组件的样式新增 */
.border-box {
  width: 100%;
  height: 95%;
  min-height: 95%;
}

.full-box { width: 100%; height: 100%; box-sizing: border-box; }
.full-width { width: 100%; box-sizing: border-box; }

/* 修改框架自动设置的字体大小 */
.dx-widget {
  font-size: 14px !important;
}
.dx-box-item-content {
  font-size: 14px !important;
}
/* 修改success弹出框的背景色 */
.dx-toast-success {
  background-color: #337ab7 !important;
}

/* 修改表格样式 */
.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link, .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused), .dx-datagrid-rowsview .dx-row-focused.dx-data-row > tr > td:not(.dx-focused) {
  background-color: #8ebe3d !important;
}
.dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-row-lines) > td, .dx-datagrid-rowsview .dx-row-focused.dx-data-row:not(.dx-row-lines) > tr:first-child > td {
  border-top: 1px solid #9dcc4e !important;
  border-bottom: 1px solid #9dcc4e !important;
}

/* 修改tab选项卡的样式 */
.dx-tabs-wrapper .dx-item.dx-tab {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  /* border: 1px solid #ccc; */
}
  /* 修改tab栏border颜色 */
.dx-tab.dx-state-focused::after {
  /* border-right: 1px solid #8ebe3d; */
  border-right: 1px solid #66c12b;
  border-left: 1px solid #66c12b;
  border-top: 1px solid #66c12b;
  border-bottom: 1px solid #66c12b;
}
.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tabs-expanded .dx-tab:not(.dx-tab-selected):first-of-type {
  box-shadow: inset 0 -1px #66c12b, inset 1px 0, inset 0 1px;
}
.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tab.dx-tab-selected {
  box-shadow: inset 0 1px #66c12b, inset -1px 0 #66c12b, inset 1px 0 #66c12b;
}
.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tab {
  box-shadow: inset 0 1px, inset 0 -1px #66c12b;
}
.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tabs {
  box-shadow: inset 0 1px, inset 0 -1px #66c12b;
}
.dx-tabpanel.dx-state-focused > .dx-tabpanel-container > .dx-multiview-wrapper {
  border-color: #66c12b;
}
  /* 修改选中的tab栏的背景色与字体色 */
.dx-item.dx-tab.dx-tab-selected {
  background-color: #66c12b;
  /* background-color: #8ebe3d; */
}
.dx-tabpanel-tabs .dx-tab.dx-tab-selected .dx-tab-content {
  color: #fff !important;
}
/* tab栏未被选中时，将默认背景设改为白色 */
.dx-viewport .dx-tabpanel > .dx-tabpanel-tabs .dx-tabs {
  background: #fff;
}
.dx-item.dx-tab {
  background-color: #fff;
}


/* 设置弹出框层级 */
.dx-toast-stack-down-push-direction {
  z-index: 100000;
}

/* 修改进度条样式 */
#nprogress .bar {
  position: fixed !important;
  top: inherit !important;
  bottom: 0px;
  background-color: red !important;
  height: 4px !important;
}

/* 搜索区 */
.search-area {
  /* background-color: #FFFFDD; */
  background: #fff;
  border-radius: 8px;
  margin: 12px 0;
  padding: 8px;
}
/* 编辑区 */
.edit-area {
  /* background-color: #e3efcf; */
  background: #fff;
  border-radius: 8px;
  margin: 12px 0;
  padding: 8px;
}
/* 列表区 */
.table-area {
  /* background-color: #e8e8e8; */
  background: #fff;
  border-radius: 8px;
  margin: 12px 0;
  padding: 8px;
}
/* 信息展示区 */
.info-area {
  background-color: #ceeaff;
}

/* 光标移动到图片时变暗 */
.active-darken-area:hover {
  filter: brightness(80%);
}
/* 移动到此区域光标变小手 */
.active-pointer-area {
  cursor:pointer;
}

.font-size-12 {
  font-size: 12px
}
.font-size-14 {
  font-size: 14px
}
.font-size-16 {
  font-size: 16px
}
.font-size-18 {
  font-size: 18px
}
.font-size-20 {
  font-size: 20px
}
.font-size-22 {
  font-size: 22px
}
.font-size-24 {
  font-size: 24px
}
.font-size-26 {
  font-size: 26px
}

.font-size-28 {
  font-size: 28px
}
.font-size-30 {
  font-size: 30px
}
.font-size-32 {
  font-size: 32px
}
.font-size-34 {
  font-size: 34px
}
.font-size-36 {
  font-size: 36px
}
.font-size-38 {
  font-size: 38px
}
.font-size-40 {
  font-size: 40px
}

.public-card {
  background: #fff;
  border-radius: 8px;
}
.public-card-color {
  background: #fff;
}




/* 时间表组件样式 */

/* 日程表组件 数据单元格样式 */
.dx-scheduler-cell-sizes-vertical {
  width: 200px;
  height: 40px;
}
.dx-scheduler-cell-sizes-horizontal {
  width: 200px;
  height: 40px;
}
/* 
  区域样式：
    enable-date 可预约时间区域
    disable-date  不可预约时间区域
    workday-area 工作日区域
    unworkday-area 非工作日区域
    vacation-area 假期区域
    trip-area 出差区域
*/
.workday-area,
.unworkday-area,
.vacation-area,
.trip-area,
.disable-date,
.enable-date {
    height: 100%;
    width: 100%;
}
/*
  不可预约时间区域样式
*/
.disable-date {
    /* background-image: repeating-linear-gradient(
        135deg,
        rgba(244, 67, 54, 0.1),
        rgba(244, 67, 54, 0.1) 4px,
        transparent 4px,
        transparent 9px
    ); */
    background-image: repeating-linear-gradient(
        135deg,
        #8080802b,
        rgba(244, 67, 54, 0.1) 2px,
        transparent 1px,
        transparent 4px
    );
    /* background: #8080802b; */
    color: #9b6467;
    /* cursor: not-allowed; */
}
/* 工作日区域样式 */
.workday-area {
  /* background: rgba(114, 224, 100, 0.2); */
}
/* 非工作日区域样式 */
.unworkday-area {
  background: rgba(255, 193, 7, 0.2);
}
.unworkday-area-gradient-color {
  background: linear-gradient(to bottom, rgba(38, 0, 255, 0.2) 0%, #fff 100%);
}
/* 假期区域样式 */
.vacation-area {
  background: rgba(238, 105, 116, 0.2);
}
.vacation-area-gradient-color {
  background: linear-gradient(to bottom, rgba(238, 105, 116, 0.2) 0%, #fff 100%);
}
/* 出差日期区域样式 */
.trip-area {
  background: rgba(38, 0, 255, 0.2);
}
.trip-area-gradient-color {
  background: linear-gradient(to bottom, rgba(38, 0, 255, 0.2) 0%, #fff 100%);
}
.dx-scheduler-header-panel-cell .disable-date .workday-area .unworkday-area .vacation-area .trip-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dx-theme-fluent .dx-scheduler-header-panel-cell .disable-date .workday-area .unworkday-area .vacation-area .trip-area,
.dx-theme-material .dx-scheduler-header-panel-cell .disable-date .workday-area .unworkday-area .vacation-area .trip-area {
    flex-direction: row;
    align-items: flex-end;
    justify-content: initial;
}

.enable-date {
    /* background: rgba(255, 193, 7, 0.2); */
    background: rgb(32 255 0 / 16%);
    /* background: #0089ff5e; */
}

.dx-scheduler-time-panel-cell .enable-date {
    color: rgba(255, 193, 7);
    /* color: rgb(32 255 0 / 16%); */
    font-weight: 400;
    background: transparent;
}

.dx-draggable {
    cursor: auto;
}

td.dx-scheduler-time-panel-cell .enable-date .cafe {
    height: 200%;
    width: 100%;
    left: 50%;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position-y: 50%;
    -webkit-mask-position-x: 100%;
    margin-top: -4px;
    background-color: #ffc107;
    /* background-color: rgb(32 255 0 / 16%); */
}

.dx-scheduler-date-table-cell {
    padding: 0;
    opacity: 1;
    border-top: 1px solid #aaa;
    width: 200px;
    height: 40px;
}

@media all and (-ms-high-contrast: none) {
    td.dx-scheduler-time-panel-cell .enable-date .cafe {
        background-color: transparent;
    }
}
/* 图例盒子 */
.legend-box {
  width: 20px;
  height: 20px;
  border-radius: 2px;
}

/*文件上传组件*/

.dx-fileuploader-wrapper .dx-button-has-text .dx-button-content{
    background: #66c12b;
    color: white;
    border-radius: 4px;
}

/* gooflow插件样式修改 */
.GooFlow_work {
  float: initial !important;
}
.rs_ghost + textarea { display: none !important; }
